import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Collapse, SearchBar, Card } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons';
import styles from './CardFAQ.module.css';

function CardFAQ() {
  const navigate = useNavigate();
  const [searchValue, setSearchValue] = useState('');

  const handleBack = () => {
    navigate(-1);
  };

  // 常见问题数据
  const faqData = [
    {
      id: 1,
      category: '卡片使用',
      icon: '💳',
      questions: [
        {
          id: 11,
          question: '校园卡丢失了怎么办？',
          answer: '1. 立即到校园卡服务中心或通过手机APP进行挂失\n2. 携带身份证到服务中心办理补卡手续\n3. 补卡费用为20元\n4. 新卡激活后原卡自动失效'
        },
        {
          id: 12,
          question: '校园卡被消磁了怎么处理？',
          answer: '1. 到校园卡服务中心进行检测\n2. 如确认消磁，可免费更换新卡\n3. 原卡余额会转移到新卡\n4. 建议避免与手机、磁性物品放在一起'
        },
        {
          id: 13,
          question: '校园卡密码忘记了怎么办？',
          answer: '1. 携带身份证到校园卡服务中心\n2. 工作人员核实身份后可重置密码\n3. 也可通过手机APP的找回密码功能\n4. 建议设置容易记住但安全的密码'
        }
      ]
    },
    {
      id: 2,
      category: '充值缴费',
      icon: '💰',
      questions: [
        {
          id: 21,
          question: '校园卡如何充值？',
          answer: '充值方式有以下几种：\n1. 现金充值：到校园卡服务中心或充值机\n2. 银行卡充值：通过圈存机转账\n3. 手机APP充值：支持微信、支付宝\n4. 网上银行充值：登录校园卡网站'
        },
        {
          id: 22,
          question: '充值后余额没有到账怎么办？',
          answer: '1. 检查充值凭证和交易记录\n2. 等待5-10分钟，系统可能有延迟\n3. 到校园卡服务中心查询交易状态\n4. 如确认充值失败，可申请退款'
        },
        {
          id: 23,
          question: '校园卡可以透支使用吗？',
          answer: '1. 餐厅消费可透支最多10元\n2. 其他消费场所不支持透支\n3. 透支后需及时充值补足余额\n4. 长期透支可能影响卡片正常使用'
        }
      ]
    },
    {
      id: 3,
      category: '功能服务',
      icon: '🔧',
      questions: [
        {
          id: 31,
          question: '校园卡都有哪些功能？',
          answer: '校园卡主要功能包括：\n1. 餐厅就餐消费\n2. 图书馆借阅和门禁\n3. 宿舍门禁和洗浴\n4. 超市购物消费\n5. 打印复印付费\n6. 体育场馆消费'
        },
        {
          id: 32,
          question: '如何查询校园卡消费记录？',
          answer: '查询方式：\n1. 手机APP：实时查询最近消费\n2. 校园卡网站：登录后查看详细记录\n3. 查询机：在校园内的自助查询机\n4. 服务中心：工作人员协助查询'
        },
        {
          id: 33,
          question: '校园卡可以代刷吗？',
          answer: '1. 校园卡仅限本人使用\n2. 不允许借给他人使用\n3. 代刷可能导致卡片被冻结\n4. 如发现代刷行为，将按规定处理'
        }
      ]
    },
    {
      id: 4,
      category: '故障处理',
      icon: '🔧',
      questions: [
        {
          id: 41,
          question: '刷卡时显示"卡片异常"怎么办？',
          answer: '1. 检查卡片是否有明显损坏\n2. 尝试在其他设备上刷卡\n3. 到服务中心检测卡片状态\n4. 如需要可申请更换新卡'
        },
        {
          id: 42,
          question: '消费时提示余额不足但卡内有钱？',
          answer: '1. 确认卡片余额是否充足\n2. 检查是否有未结算的预授权\n3. 重启刷卡设备再次尝试\n4. 联系服务中心核实账户状态'
        }
      ]
    }
  ];

  // 过滤搜索结果
  const filteredFAQ = faqData.map(category => ({
    ...category,
    questions: category.questions.filter(q => 
      q.question.toLowerCase().includes(searchValue.toLowerCase()) ||
      q.answer.toLowerCase().includes(searchValue.toLowerCase())
    )
  })).filter(category => category.questions.length > 0);

  return (
    <div className={styles.container}>
      {/* 导航栏 */}
      <NavBar 
        onBack={handleBack}
        backIcon={<LeftOutline />}
        className={styles.navbar}
      >
        校园卡常见问题
      </NavBar>

      {/* 搜索栏 */}
      <div className={styles.searchContainer}>
        <SearchBar
          placeholder="搜索问题..."
          value={searchValue}
          onChange={setSearchValue}
          className={styles.searchBar}
        />
      </div>

      {/* 主要内容 */}
      <div className={styles.content}>
        {/* 服务提示 */}
        <Card className={styles.serviceCard}>
          <div className={styles.serviceHeader}>
            <div className={styles.serviceIcon}>📞</div>
            <div className={styles.serviceInfo}>
              <h3 className={styles.serviceTitle}>校园卡服务中心</h3>
              <p className={styles.serviceDesc}>如果以下问题无法解决您的疑问，请联系我们</p>
            </div>
          </div>
          <div className={styles.contactInfo}>
            <div className={styles.contactItem}>
              <span className={styles.contactLabel}>服务电话:</span>
              <span className={styles.contactValue}>027-68756789</span>
            </div>
            <div className={styles.contactItem}>
              <span className={styles.contactLabel}>服务时间:</span>
              <span className={styles.contactValue}>周一至周五 8:30-17:30</span>
            </div>
            <div className={styles.contactItem}>
              <span className={styles.contactLabel}>服务地点:</span>
              <span className={styles.contactValue}>学生活动中心一楼</span>
            </div>
          </div>
        </Card>

        {/* FAQ列表 */}
        <div className={styles.faqList}>
          {filteredFAQ.map((category) => (
            <Card key={category.id} className={styles.categoryCard}>
              <div className={styles.categoryHeader}>
                <div className={styles.categoryIcon}>{category.icon}</div>
                <h3 className={styles.categoryTitle}>{category.category}</h3>
                <div className={styles.questionCount}>
                  {category.questions.length} 个问题
                </div>
              </div>
              <Collapse className={styles.collapse}>
                {category.questions.map((item) => (
                  <Collapse.Panel 
                    key={item.id} 
                    title={item.question}
                    className={styles.collapsePanel}
                  >
                    <div className={styles.answer}>
                      {item.answer.split('\n').map((line, index) => (
                        <div key={index} className={styles.answerLine}>
                          {line}
                        </div>
                      ))}
                    </div>
                  </Collapse.Panel>
                ))}
              </Collapse>
            </Card>
          ))}
        </div>

        {/* 空状态 */}
        {filteredFAQ.length === 0 && searchValue && (
          <div className={styles.emptyState}>
            <div className={styles.emptyIcon}>🔍</div>
            <div className={styles.emptyText}>未找到相关问题</div>
            <div className={styles.emptySubtext}>
              请尝试其他关键词或联系服务中心
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default CardFAQ;